<meta charset="UTF-8">

<script type="text/javascript">
	$(function(){
		$("#records_user").datagrid({
			idField: 'id',
			title: '借书记录列表',
			fitColumns: true,
			width: '100%',
			striped: true,
			fit: true,
			loadMsg: '数据正在加载中...',
			rownumbers: true,
			url: 'records/list',
			queryParams: {methon: $('#records_methon').val()},
			singleSelect: true,
			sortName: 'id',
			sortOrder: 'asc',
			pagination: true,
			pageSize: 10,
			pageList: [5, 10, 15, 20, 25, 50],
			columns: [
				[
					{
						field: 'id',
						title: 'id',
						width: 100,
						align: 'center',
						sortable:true
					},{
						field: 'user',
						title: '借书人姓名',
						width: 150,
						align: 'center',
						formatter: function(value){  
							return value.name;
						}
					},{
						field: 'startTime',
						title: '借书时间',
						width: 150,
						align: 'center'
					},{
						field: 'returnTime',
						title: '还书时间',
						width: 150,
						align: 'center'
					},{
						field: 'book',
						title: '书名',
						width: 150,
						align: 'center',
						formatter: function(value){  
							return value.name;
						}
					},{
						field: 'state',
						title: '状态',
						width: 150,
						align: 'center'
					},{
						field: 'reamark',
						title: '备注',
						width: 150,
						align: 'center'
					}
				]
			]
		});
		//查询
		$('#records_searchbtn').click(function(){
			$('#records_user').datagrid('load', serializeForm($('#records_form').form()));
		});
		//清除查询
		$('#records_clearbtn').click(function(){
			$('#records_form').form('clear');
			$("#records_user").datagrid('load', {});
		});		
	});
</script>
<div fit=true class="easyui-layout">
	<div data-options="region:'north',split:false" style="height: 65px;">
		<form class="layui-form" id="records_form" method="post">
			<div class="layui-input-inline">
				<input type="text" name="userName" placeholder="姓名"
					class="layui-input">
			</div>
			<div class="layui-input-inline">
				<input type="text" name="name" placeholder="书名" class="layui-input">
			</div>
			<div class="layui-input-inline">
				<input type="text" name="state" placeholder="状态" class="layui-input">
			</div>
			<div class="layui-btn-group">
				<button type="button" id="records_searchbtn"
					class="layui-btn layui-btn-normal">
					<i class="layui-icon">&#xe615;</i>查询
				</button>
				<button type="button" id="records_clearbtn"
					class="layui-btn layui-btn-warm">
					<i class="layui-icon">&#xe640;</i>清空
				</button>
			</div>
		</form>
	</div>
	<div data-options="region:'center',split:false">

		<input id="records_methon" type="hidden" th:value='${methon}'>
		<table id="records_user"></table>
	</div>
</div>
